<template>
    <LayoutWrap class="permission">
        <el-form @submit.native.prevent ref="formSearch" :inline="true" :model="formSearch" label-width="90px">
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="仓库" prop="depot">
                        <el-select
                            v-model="formSearch.depot"
                            filterable
                            clearable
                            placeholder="请选择"
                            style="width: 322px"
                            @keyup.enter.native="getList"
                        >
                            <el-option
                                v-for="item in optionsDepots"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="时间类型" prop="dateType">
                        <el-select
                            v-model="formSearch.dateType"
                            filterable
                            placeholder="请选择"
                            style="width: 322px"
                            @keyup.enter.native="getList"
                        >
                            <el-option
                                v-for="item in optionsDateTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="时间区间" prop="startDate">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            format="yyyy/MM/dd"
                            prefix-icon="false"
                            v-model="formSearch.startDate"
                            :clearable="true"
                            class="custom-the-datepicker"
                            style="width: 88px;margin-right: 5px;"
                            @change="onChangeDate($event, 'startDate')"
                            @keyup.enter.native="getList"
                        ></el-date-picker>
                        <el-time-select
                            prefix-icon="false"
                            placeholder="起始时间"
                            v-model="formSearch.startTime"
                            class="custom-the-datepicker"
                            style="width: 60px;"
                            :clearable="false"
                            :picker-options="{
                                start: '00:00',
                                step: '01:00',
                                end: '24:00'
                            }"
                            @change="onChangeDate($event, 'startTime')"
                            @keyup.enter.native="getList"
                        >
                        </el-time-select>
                        <span style="display: inline-block; padding: 0 5px;">-</span>
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            format="yyyy/MM/dd"
                            prefix-icon="false"
                            v-model="formSearch.endDate"
                            :clearable="true"
                            class="custom-the-datepicker"
                            style="width: 88px;margin-right: 5px;"
                            @change="onChangeDate($event, 'endDate')"
                            @keyup.enter.native="getList"
                        ></el-date-picker>
                        <el-time-select
                            prefix-icon="false"
                            placeholder="结束时间"
                            v-model="formSearch.endTime"
                            class="custom-the-datepicker"
                            style="width: 60px; margin-right: 5px;"
                            :clearable="false"
                            :picker-options="{
                                start: '00:00',
                                step: '01:00',
                                end: '24:00'
                            }"
                            @change="onChangeDate($event, 'endTime')"
                            @keyup.enter.native="getList"
                        >
                        </el-time-select>
                    </el-form-item>
                </div>
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="时间快捷项" prop="selectMenu">
                        <el-select
                            style="width: 322px"
                            v-model="formSearch.selectMenu"
                            placeholder="请选择"
                            :popper-append-to-body="false"
                            clearable
                            @change="onChangeTimeRange"
                            @clear="onChangeTimeRange('All')"
                            @keyup.enter.native="getList"
                        >
                            <el-option
                                v-for="item in menuOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="关键词" prop="keyName">
                        <el-select
                            class="custom-the-select_key"
                            popper-class="custom-the-select-popper_key"
                            v-model="formSearch.keyName"
                            placeholder="请选择"
                            style="width: 105px;margin-right: 10px;"
                        >
                            <el-option
                                v-for="item in keyOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                        <br v-if="isMobile" />
                        <el-input
                            v-model="formSearch.keyValue"
                            placeholder="请输入关键字检索"
                            @keyup.enter.native="getList"
                            style="width: 206px"
                        ></el-input>
                    </el-form-item>
                </div>
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="数量类型" prop="numberType">
                        <el-select v-model="formSearch.numberType" filterable placeholder="请选择" style="width: 322px">
                            <el-option
                                v-for="item in optionsNumberTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="数量范围" prop="keyName">
                        <el-input
                            v-model="formSearch.numberStart"
                            @keyup.enter.native="getList"
                            style="width: 105px;"
                        ></el-input>
                        <span style="display: inline-block; margin: 0 15px">-</span>
                        <br v-if="isMobile" />
                        <el-input
                            v-model="formSearch.numberEnd"
                            @keyup.enter.native="getList"
                            style="width: 105px;"
                        ></el-input>
                    </el-form-item>
                </div>
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="排序方式" prop="sortType">
                        <el-select
                            @change="setOrderSortType"
                            v-model="formSearch.sortType"
                            filterable
                            placeholder="请选择"
                            style="width: 322px"
                        >
                            <el-option
                                v-for="item in optionsSortTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="单据类型" prop="type">
                        <el-select
                            clearable
                            v-model="formSearch.type"
                            filterable
                            placeholder="请选择"
                            style="width: 322px"
                        >
                            <el-option
                                v-for="item in optionsTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="收支项目" prop="itemOutInId">
                        <el-select
                            clearable
                            v-model="formSearch.itemOutInId"
                            filterable
                            placeholder="请选择"
                            style="width: 322px"
                        >
                            <el-option
                                v-for="item in optionsProjects"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <div class="search-wrap">
                <div class="search-item" :class="{left: !isMobile}">
                    <el-form-item label="  ">
                        <el-button type="primary" style="min-width: 120px;" @click="getList">查询</el-button>
                        <br v-if="isMobile" />
                        <el-button type="default" style="min-width: 120px;" @click="resetForm('formSearch')"
                            >重置</el-button
                        >
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <ul class="list-head" v-if="isOperation">
            <li class="list-head-item">
                <el-button
                    :disabled="!isMultSelect"
                    @click="onClickDelete(multipleSelection)"
                    style="min-width:80px;"
                    type="danger"
                    >批量删除</el-button
                >
            </li>
        </ul>
        <el-table
            v-loading="isLoading"
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
            ref="multipleUpdateTable"
            :summary-method="getSummaries"
            show-summary
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index"> </el-table-column>
            <el-table-column prop="itemInfo.type" label="单据类型" sortable :width="94" align="center">
                <template v-slot="{row}">
                    <el-tag :type="row.itemInfo.type | showAccountPlayType" disable-transitions>{{
                        row.itemInfo.type | showAccountPlayDescType
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="itemInfo.documentNo" label="单据编号" sortable>
                <template v-slot="{row}">
                    <TextButton @click="onClickDetail(row, '查看单据')">
                        {{ row.itemInfo && row.itemInfo.documentNo }}
                    </TextButton>
                </template>
            </el-table-column>
            <el-table-column prop="itemInfo.documentDate" label="单据日期" sortable>
                <template v-slot="{row}">
                    {{ row.itemInfo.documentDate | formatDateFillStr }}
                </template>
            </el-table-column>
            <el-table-column prop="itemInfo.accountInfo" label="单据账户" sortable>
                <template v-slot="{row}">
                    <TextButton
                        v-if="row.itemInfo.accountInfo && row.itemInfo.accountInfo.name"
                        @click="onClickReciprocalDetail(row.itemInfo.accountInfo, '查看单据账户')"
                    >
                        {{ row.itemInfo.accountInfo && row.itemInfo.accountInfo.name }}
                    </TextButton>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="发生日期" sortable>
                <template v-slot="{row}">
                    {{ row.date | formatShortDate }}
                </template>
            </el-table-column>
            <el-table-column prop="ReciprocalNumberReversal" label="对方账号（单位）" sortable>
                <template v-slot="{row}">
                    <template v-if="Array.isArray(row.ReciprocalNumberReversal)">
                        <TextButton
                            v-for="(item, index) in deduplication(row.ReciprocalNumberReversal)"
                            :key="index"
                            @click="onClickReciprocalDetail(item, '查看对方账号（单位）')"
                        >
                            {{ item.name }} {{ item.count > 1 ? `+${item.count}` : '' }}
                        </TextButton>
                    </template>
                    <template v-else>
                        <TextButton
                            v-if="row.ReciprocalNumberReversal && row.ReciprocalNumberReversal.name"
                            @click="onClickReciprocalDetail(row.ReciprocalNumberReversal, '查看对方账号（单位）')"
                        >
                            {{ row.ReciprocalNumberReversal && row.ReciprocalNumberReversal.name }}
                        </TextButton>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="itemOutInId" label="收支项目" sortable>
                <template v-slot="{row}">
                    {{ {id: row.itemOutInId, arr: optionsProjects} | findValue }}
                </template>
            </el-table-column>
            <el-table-column prop="money" label="金额" sortable>
                <template v-slot="{row}">
                    {{ row.money | keep2decimalPlaces }}
                </template>
            </el-table-column>
            <el-table-column prop="abstract" label="摘要" sortable>
                <template v-slot="{row}">
                    {{ row.abstract }}
                </template>
            </el-table-column>

            <el-table-column prop="itemInfo.depotInfo.name" label="仓库" sortable> </el-table-column>
            <el-table-column prop="itemInfo.remark" label="单据备注"> </el-table-column>
            <el-table-column prop="date" label="创建时间" sortable>
                <template v-slot="{row}">
                    {{ row.date | formatDateFillStr }}
                </template>
            </el-table-column>
        </el-table>
        <Pagination
            :page-size.sync="formSearch.pageSize"
            :page.sync="formSearch.page"
            :total="formSearch.count"
            @change="onChangePage"
        />
        <ItemOutDialog
            :title="documentTitle"
            :visible.sync="visibleItemOutDetail"
            :data-source="dataSourceDetail"
            :optionsPersons="optionsPersons"
            :optionsVendors="optionsVendors"
            :optionsProjects="optionsProjects"
            :optionsAccounts="optionsAccounts"
            :optionsDepots="optionsDepots"
            closeOnPressEscape
            closeOnClickModal
        ></ItemOutDialog>
        <ItemInDialog
            :title="documentTitle"
            :visible.sync="visibleItemInDetail"
            :data-source="dataSourceDetail"
            :optionsPersons="optionsPersons"
            :optionsCustomers="optionsCustomers"
            :optionsProjects="optionsProjects"
            :optionsAccounts="optionsAccounts"
            :optionsDepots="optionsDepots"
            closeOnPressEscape
            closeOnClickModal
        ></ItemInDialog>
        <TransferDialog
            :title="documentTitle"
            :visible.sync="visibleTransferDetail"
            :data-source="dataSourceDetail"
            :optionsPersons="optionsPersons"
            :optionsAccounts="optionsAccounts"
            :optionsDepots="optionsDepots"
            closeOnPressEscape
            closeOnClickModal
        ></TransferDialog>
        <!-- 查看账户信息 -->
        <AccountDialog
            :title="documentTitle"
            :visible.sync="visibleAccountDetail"
            :data-source="dataSourceDetail"
            :optionsPersons="optionsPersons"
            closeOnPressEscape
            closeOnClickModal
        ></AccountDialog>
    </LayoutWrap>
</template>
<script>
import ItemOutDialog from '@/views/financial/item-out/FunctionDialog';
import ItemInDialog from '@/views/financial/item-in/FunctionDialog';
import TransferDialog from '@/views/financial/transfer/FunctionDialog';
import AccountDialog from '@/views/system/account/FunctionDialog';
import {getApiList as getPersons} from '@/api/person';
import {getApiList as getVendors} from '@/api/vendor';
import {getApiList as getCustomers} from '@/api/customer';
import {getApiList as getProjects} from '@/api/itemOutIn';
import {getApiList as getAccounts} from '@/api/account';
import {getApiList as getDepots} from '@/api/depot';

import {mapGetters} from 'vuex';
import {getReportsItemProjects, deleteReportsItemProjects} from '@/api/report';
import {deepCopy} from '@/utils/utils';
import {v4 as uuidv4} from 'uuid';
import moment from 'moment';
import {mixinIsOperation} from '@/mixins';
function getOrderSortType() {
    return localStorage.getItem('OrderSortType');
}
function setOrderSortType(value) {
    localStorage.setItem('OrderSortType', value);
}

export default {
    name: 'order',
    components: {ItemOutDialog, ItemInDialog, TransferDialog, AccountDialog},
    mixins: [mixinIsOperation],
    data() {
        return {
            srcList: [],
            uuidv4,
            formSearch: {
                startDate: '',
                startTime: '',
                endDate: '',
                endTime: '',

                selectMenu: 'All', // 'CustomTime' 'LastWeek',
                depot: '',

                numberType: 'money',
                numberStart: '',
                numberEnd: '',

                sortType: getOrderSortType() || 'PositiveOrder',

                type: undefined, // 单据类型
                itemOutInId: undefined, // 收支项目

                dateType: 'date',
                keyName: 'abstract',
                keyValue: '',
                pageSize: 10,
                page: 1,
                count: 0
            },
            optionsTypes: [
                {label: '收入', value: '1'},
                {label: '支出', value: '2'},
                {label: '转账', value: '5'}
            ],
            keyOptions: [
                // {label: '提货日期', value: 'datetime', disabled: false},
                // {label: '店铺（间）', value: 'store', disabled: false},
                // {label: '每日单量', value: 'order', disabled: false},
                // {label: '仓库名称', value: 'depotInfo.name', disabled: false},
                {label: '摘要', value: 'abstract', disabled: false}
            ],
            tableData: [],
            isLoading: false,
            visibleDetail: false,
            multipleSelection: [],
            optionsDateTypes: [
                {label: '发生时间', value: 'date'},
                {label: '单据时间', value: 'documentDate'},
                {label: '操作时间', value: 'operatorDate'},
                // {label: '创建时间', value: 'updatedAt'},
                {label: '创建时间', value: 'createdAt'}
            ],
            optionsNumberTypes: [{label: '金额', value: 'money'}],
            optionsSortTypes: [
                {label: '时间顺序', value: 'PositiveOrder'},
                {label: '时间倒序', value: 'ReverseOrder'}
            ],
            optionsPersons: [],
            optionsCustomers: [],
            optionsVendors: [],
            optionsProjects: [],
            optionsAccounts: [],
            optionsDepots: [],

            visibleItemOutDetail: false, // 查看支出单据
            visibleItemInDetail: false, // 查看收入单据
            visibleTransferDetail: false, // 查看转账单据
            visibleAccountDetail: false, // 查看账户信息弹出
            dataSourceDetail: {},
            documentTitle: ''
        };
    },
    computed: {
        ...mapGetters({
            isMobile: 'app/isMobile'
        }),
        userHeaders() {
            return this.$store.getters['user/headers'];
        },
        isMultSelect() {
            return this.multipleSelection.length > 0;
        }
    },
    created() {
        const result = new Array(12).fill('').map((item, index) => {
            const month = (index + 1).toString();
            return {
                label: `${month}月份`,
                value: `${month}`,
                method: (month => () => {
                    month = month.padStart(2, '0');
                    const startDate = moment().format(`YYYY-${month}-01`);
                    const endDate = moment(startDate)
                        .endOf('month')
                        .format('YYYY-MM-DD');

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                })(month)
            };
        });

        this.menuOptions = [
            {
                label: '所有时间',
                value: 'All',
                method: () => {
                    this.formSearch = {
                        ...this.formSearch,
                        startDate: '',
                        startTime: '',
                        endDate: '',
                        endTime: ''
                    };
                }
            },
            {label: '自定义时间', value: 'CustomTime', method: () => {}},
            {
                label: '今天',
                value: 'Today',
                method: () => {
                    const startDate = moment().format('YYYY-MM-DD');
                    const endDate = startDate;

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                }
            },
            {
                label: '昨天',
                value: 'Yesterday',
                method: () => {
                    const startDate = moment()
                        .add(-1, 'days')
                        .format('YYYY-MM-DD');
                    const endDate = startDate;

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                }
            },
            {
                label: '最近一月',
                value: 'LastMonth',
                method: () => {
                    const startDate = moment()
                        .add(-30, 'days')
                        .format('YYYY-MM-DD');
                    const endDate = moment().format('YYYY-MM-DD');

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                }
            }
        ];
        this.menuOptions.push(...result);

        // const selectMenu = `${moment().format('MM') - 0}`;
        // this.formSearch.selectMenu = selectMenu;

        // const target = this.menuOptions.find(item => item.value === selectMenu);
        // target && target.method();

        this.getList();
        this.getAllOptions();
    },
    beforeDestroy() {},
    methods: {
        onClickDelete(multipleSelection) {
            this.$confirm(`此操作将删除${multipleSelection.length}条数据, 是否继续?`, '提示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                type: 'warning'
            })
                .then(() => {
                    deleteReportsItemProjects(multipleSelection.map(item => item._id))
                        .then(({data: res}) => {
                            this.$message({showClose: true, type: 'success', message: '删除成功'});

                            this.getList();
                        })
                        .catch(error => {
                            console.error(error);
                            const data = error.response && error.response.data;
                            if (data && data.error) {
                                this.$message({showClose: true, type: 'error', message: data.error});
                            } else {
                                this.$message({showClose: true, type: 'error', message: '删除失败'});
                            }
                        });
                })
                .catch(() => {});
        },
        getSummaries(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (column.property === 'money' || column.property === 'total') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = `¥ ${sums[index].toFixed(2)}`;
                } else {
                    // sums[index] = 'N/A';
                    sums[index] = '';
                }
            });

            return sums;
        },
        getAllOptions() {
            const newItem = {
                page: 1,
                pageSize: 1000
            };
            getPersons({
                isDeleted: false,
                type: '5',
                sort: '-date',
                select: '_id name -operator',
                ...newItem
            })
                .then(({data: res}) => {
                    this.optionsPersons = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.error('error', error);
                });
            getCustomers({...newItem, isDeleted: false})
                .then(({data: res}) => {
                    this.optionsCustomers = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.error('error', error);
                });
            getVendors({...newItem, isDeleted: false})
                .then(({data: res}) => {
                    this.optionsVendors = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.error('error', error);
                });
            getProjects(newItem)
                .then(({data: res}) => {
                    this.optionsProjects = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.error('error', error);
                });
            getAccounts(newItem)
                .then(({data: res}) => {
                    this.optionsAccounts = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.error('error', error);
                });
            getDepots({...newItem, isDeleted: false})
                .then(({data: res}) => {
                    this.optionsDepots = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.error('error', error);
                });
        },
        deduplication(arr = [], prop = '_id') {
            return arr.reduce((acc, item) => {
                const hit = acc.find(c => c[prop] === item[prop]);
                if (!hit) {
                    item.count = 1;
                    acc.push(item);
                } else {
                    hit.count += 1;
                }
                return acc;
            }, []);
        },
        onClickReciprocalDetail(dataSourceDetail, title) {
            this.documentTitle = title;
            this.dataSourceDetail = {...dataSourceDetail};
            this.visibleAccountDetail = true;
        },
        setOrderSortType,
        onChangeTimeRange(value) {
            const target = this.menuOptions.find(item => item.value === value);
            if (target && target.method) {
                target.method();
            }
        },
        onChangeDate(value, type) {
            this.formSearch.selectMenu = 'CustomTime';

            if (type === 'startDate' && !value) {
                this.formSearch = {...this.formSearch, startTime: ''};
            }
            if (type === 'startDate' && value && !this.formSearch.startTime) {
                this.formSearch = {...this.formSearch, startTime: '00:00'};
            }
            if (type === 'endDate' && !value) {
                this.formSearch = {...this.formSearch, endTime: ''};
            }
            if (type === 'endDate' && value && !this.formSearch.endTime) {
                this.formSearch = {...this.formSearch, endTime: '24:00'};
            }
        },
        onChangePage(value) {
            const newValue = {...value, type: undefined};
            this.formSearch = {...this.formSearch, ...newValue};
            this.getList();
        },
        resetForm() {
            const formSearch = this.$options.data().formSearch;

            this.formSearch = {
                ...this.formSearch,
                ...formSearch
            };
        },
        handleSelectionChange(value) {
            this.multipleSelection = deepCopy(value).map(item => {
                item.uuid = uuidv4();
                return item;
            });
        },

        // 获取列表数据
        getList() {
            this.isLoading = true;
            const formSearch = this.formSearch;
            const newItem = {
                depot: formSearch.depot || undefined,
                remark: formSearch.remark || undefined,
                pageSize: formSearch.pageSize,
                type: formSearch.type || undefined,
                itemOutInId: formSearch.itemOutInId || undefined,
                page: formSearch.page,
                sort: formSearch.sortType === 'ReverseOrder' ? `-${formSearch.dateType}` : formSearch.dateType
            };

            const dateType = formSearch.dateType;
            if (dateType && (formSearch.startDate || formSearch.endDate)) {
                newItem[dateType] = {};

                if (formSearch.startDate) {
                    newItem[dateType].gte = new Date(
                        `${moment(formSearch.startDate).format('YYYY-MM-DD')} ${formSearch.startTime}`
                    ).getTime();
                }
                if (formSearch.endDate) {
                    newItem[dateType].lt = new Date(
                        `${moment(formSearch.endDate).format('YYYY-MM-DD')} ${formSearch.endTime}`
                    ).getTime();
                }
            }
            const numberType = formSearch.numberType;

            if (numberType && (formSearch.numberStart || formSearch.numberEnd)) {
                newItem[numberType] = {};

                if (formSearch.numberStart) {
                    newItem[numberType].gte = formSearch.numberStart - 0;
                }
                if (formSearch.numberEnd) {
                    newItem[numberType].lte = formSearch.numberEnd - 0;
                }
            }

            if (formSearch.keyValue) {
                newItem[formSearch.keyName] = formSearch.keyValue;
            }
            getReportsItemProjects(newItem)
                .then(({data: res}) => {
                    if (res.status === 200) {
                        const {data, count, page, pageSize} = res;

                        this.tableData = data.map(item => {
                            const itemInInfo = item.itemInInfo;
                            const itemOutInfo = item.itemOutInfo;
                            const transferInfo = item.transferInfo;
                            let itemInfo = {};
                            let ReciprocalNumberReversal; // 对方单位（转账收款人、支出客户、收入供应商）
                            if (itemInInfo) {
                                itemInfo = {...itemInfo, ...itemInInfo, type: '1'};
                                ReciprocalNumberReversal = itemInInfo.customerInfo;
                            } else if (itemOutInfo) {
                                itemInfo = {...itemInfo, ...itemOutInfo, type: '2'};
                                ReciprocalNumberReversal = itemOutInfo.vendorInfo;
                            } else if (transferInfo) {
                                itemInfo = {...itemInfo, ...transferInfo, type: '5'};
                                ReciprocalNumberReversal = item.accountInfo;
                            }
                            // console.log(ReciprocalNumberReversal);

                            return {...item, itemInfo, ReciprocalNumberReversal};
                        });
                        this.formSearch = {...this.formSearch, page, pageSize, count};
                    }
                })
                .catch(error => {
                    console.log(error);
                    const data = error.response && error.response.data;
                    if (data && data.error) {
                        this.$message({showClose: true, type: 'error', message: data.error});
                    } else {
                        this.$message({showClose: true, type: 'error', message: '获取数据失败'});
                    }
                })
                .finally(() => (this.isLoading = false));
        },

        onClickDetail(row) {
            this.dataSourceDetail = {...row.itemInfo};

            switch (row.itemInfo.type) {
                // 收入
                case '1': {
                    this.documentTitle = '查看收入单据';
                    this.visibleItemOutDetail = false;
                    this.visibleItemInDetail = true;
                    this.visibleTransferDetail = false;
                    break;
                }
                // 支出
                case '2': {
                    this.documentTitle = '查看支出单据';
                    this.visibleItemOutDetail = true;
                    this.visibleItemInDetail = false;
                    this.visibleTransferDetail = false;
                    break;
                }
                case '5': {
                    this.documentTitle = '查看转账单据';
                    this.visibleItemOutDetail = false;
                    this.visibleItemInDetail = false;
                    this.visibleTransferDetail = true;
                    break;
                }

                default:
                    break;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep {
    .cell {
        padding-left: 5px;
        padding-right: 5px;
    }
    .image-column-wrapper {
        .cell {
            padding-left: 5px;
            padding-right: 5px;
        }
    }
    .upload-length--1 {
        .el-upload {
            display: none;
        }
        .el-upload-list__item:first-child {
            margin-top: 0;
        }
    }
    .el-upload-dragger {
        width: auto;
        height: auto;
    }
}
.custom-the-datepicker,
.custom-the-select_time,
.custom-the-select_key {
    ::v-deep {
        .el-input__inner {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
}
</style>
